<template>
  <div class="divBox">
    <el-card class="box-card">
      <div class="header">
        <div class="dot"></div>
        销售排名
      </div>
      <el-table
        v-loading="sall.loading"
        :data="sall.list"
        style="width: 100%"
        size="mini"
        name="m1"
        :row-key="
          row => {
            return row.id;
          }
        "
      >
        <el-table-column prop="area_name" label="所在区县" />
        <el-table-column prop="name" label="公司名称" />
        <el-table-column label="上级公司">
          <template slot-scope="scope">{{ scope.row.superior.name }}</template>
        </el-table-column>
        <el-table-column prop="ranking" label="总排名">
          <template slot-scope="{ $index }">
            {{ sall.limit * (sall.page - 1) + $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="sale_count" label="开卡数量" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="onDetails(scope.row, scope.$index, 1)"
              >查看业绩</el-link
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="sall.limit"
          :current-page="sall.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="sall.total"
          @size-change="sallSizeChange"
          @current-change="sallPageChange"
        />
      </div>
      <div class="header">
        <div class="dot"></div>
        首充排名
      </div>
      <el-table
        v-loading="charge.loading"
        :data="charge.list"
        style="width: 100%"
        size="mini"
        name="m1"
        :row-key="
          row => {
            return row.id;
          }
        "
      >
        <el-table-column prop="area_name" label="所在区县" />
        <el-table-column prop="name" label="公司名称" />
        <el-table-column prop="real_name" label="上级公司">
          <template slot-scope="scope">{{ scope.row.superior.name }}</template>
        </el-table-column>
        <el-table-column prop="ranking" label="总排名">
          <template slot-scope="{ $index }">
            {{ charge.limit * (charge.page - 1) + $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="sale_save_count" label="首充数量" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="onDetails(scope.row, scope.$index, 2)"
              >查看业绩</el-link
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="charge.limit"
          :current-page="charge.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="charge.total"
          @size-change="chargeSizeChange"
          @current-change="chargePageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { companyRank } from "@/api/statistics";
import { roterPre } from "@/settings";
export default {
  name: "",
  data() {
    return {
      sall: {
        list: [],
        total: 0,
        loading: false,
        limit: 20,
        page: 1
      },
      charge: {
        list: [],
        total: 0,
        loading: false,
        limit: 20,
        page: 1
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    sallPageChange(page) {
      this.sall.page = page;
      this.getSallList("");
    },
    sallSizeChange(val) {
      this.sall.limit = val;
      this.getSallList("");
    },
    getSallList() {
      const param = {
        limit: this.sall.limit,
        page: this.sall.page,
        type: 1
      };
      this.sall.loading = true;
      companyRank(param)
        .then(res => {
          this.sall.list = res.data.list;
          this.sall.total = res.data.count;
          this.sall.loading = false;
        })
        .catch(e => {
          this.$message.error(e);
          this.sall.loading = false;
        });
    },
    chargePageChange(page) {
      this.charge.page = page;
      this.getChargeList();
    },
    chargeSizeChange(val) {
      this.charge.limit = val;
      this.getChargeList();
    },
    getChargeList() {
      const param = {
        limit: this.charge.limit,
        page: this.charge.page,
        type: 2
      };
      this.charge.loading = true;
      companyRank(param)
        .then(res => {
          this.charge.loading = false;
          this.charge.list = res.data.list;
          this.charge.total = res.data.count;
        })
        .catch(e => {
          this.$message.error(e);
          this.charge.loading = false;
        });
    },
    onDetails(row, index, type) {
      if (type == 1) {
        this.$router.push({
          path: roterPre + "/company/detail",
          query: {
            id: row.id,
            ranking: this.sall.limit * (this.sall.page - 1) + index + 1
          }
        });
      } else if (type == 2) {
        this.$router.push({
          path: roterPre + "/company/detail",
          query: {
            id: row.id,
            ranking: this.charge.limit * (this.charge.page - 1) + index + 1
          }
        });
      }
    }
  },
  created() {},
  mounted() {
    this.getChargeList();
    this.getSallList();
  }
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  width: 100%;
  height: 61px;
  align-items: center;
  line-height: 24px;
  padding-left: 27px;
  font-size: 18px;
  color: #333333;
  border-bottom: 1px solid #eeeeee;

  .dot {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    margin-right: 4px;
    background: #385be1;
  }
}
.el-table {
  min-height: 300px;
}
</style>
